<template>
    <div class="top">
        <div class="right">
            <el-input v-model="input" class="w" size="large" placeholder="请输入搜索关键字" />
            <div class="button">
                <el-button type="primary" class="btn">搜索</el-button>
            </div>
        </div>
        <div class="button1">
            <el-button type="primary" class="btn1" @click="addApprove">{{ msg }}</el-button>
        </div>

        <!-- 弹窗 -->
        <el-dialog v-model="dialogFormVisible" title="Shipping address ">
            <el-from v-model="formData">
                <div class="input">
                    <p>审批id：</p>
                    <el-input v-model="a_id" placeholder="请输入审批id" class="elinput" />
                </div>
                <div class="input">
                    <p>审批类型：</p>
                    <el-input v-model="a_type" placeholder="请输入审批类型" class="elinput" />
                </div>

            </el-from>
            <div class="mybtn">
                <mybtn :msg="quxiao"></mybtn>
                <mybtn :msg="baocun" @click="addApp"></mybtn>
            </div>
        </el-dialog>

    </div>
</template>

<script lang="ts">

import axios from 'axios'
import mybtn from './mybtn.vue'
import { defineComponent } from 'vue'
import { ref, toRefs, reactive } from "vue"
export default defineComponent({
    props: ['msg'],
    components: {
        mybtn
    },
    setup(props) {
        const quxiao = ref('取消')
        const baocun = ref('保存')
        const input = ref("")
        const a_id = ref("")
        const a_type = ref("")
        const formData = ref("")
        const value = ref("")
        const options = [
            {
                value: "OPtion1",
                label: "option1"
            }
        ]

        const addApp = () => {
            console.log("保存成功");
            axios({
                url: "http://1.14.73.59:8080/Approval/addApprovalmsg",
                method: "post",
                params: {
                    a_id: a_id,
                    a_type: a_type
                }
            }).then(
                resp => {
                    console.log("请求add成功");

                    console.log("resp.data");
                }
            )
        }
        const addApprove = () => {
            console.log("新建添加");
            data.dialogFormVisible = true
        }
        const data = reactive({
            dialogFormVisible: false
        })
        return {
            input,
            a_type,
            a_id,
            formData,
            value,
            options,
            quxiao,
            baocun,
            addApprove,
            addApp,
            ...toRefs(data)

        }
    }

})

</script>

<style scoped>
.top {
    display: flex;
    flex-direction: row;
    align-items: center;

    justify-content: space-between;
}

.mybtn {
    display: flex;
    flex-direction: row;
    align-items: center;

    justify-content: center;
}

.input {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.elinput {
    width: 90%;
}

.select {
    width: 134px;
}

.right {
    display: flex;
}

.w {
    height: 38px;
}


.button {
    margin-left: 10px;
}

.btn {
    height: 38px;

}

.button1 {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;


}

.btn1 {
    height: 38px;
    float: right;

}
</style>